<%@ page  contentType="text/html;charset=UTF-8"  %>
<%@page language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>登录页面</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/md5.js"></script>
<script type="text/javascript">
	window.onload=function(){
		var accountTop =  document.getElementById("accountTop");
		var PhoneTop =  document.getElementById("PhoneTop");
		var accountContext =  document.getElementById("accountContext");
		var PhoneContext =  document.getElementById("PhoneContext");
		//进入账号登录的也签
		accountTop.onmouseover = function(){
			PhoneContext.style.display="none";
			accountContext.style.display="block";
		}
		
		
		//进入账号登录的也签
		PhoneTop.onmouseover = function(){
			PhoneContext.style.display="block";
			accountContext.style.display="none";
		}
		
		
		//表单的提交验证。
		
		var btn01 = document.getElementById("btn01");
		btn01.onclick=function(){
			
			//验证表单中的数据的合法性。
			//获得输入的用户名
			var account = form1.account.value;
			var pwd = form1.pwd.value;
			
			if(account==""){
				alert("请输入账号");
				form1.account.focus();
				
				return ;
			}
			if(pwd==""){
				alert("请输入密码");
				form1.pwd.focus();				
				return ;
			}
			
			//把密码进行加密
			
			form1.pwd.value =  hex_md5(pwd);
			
			
			//提交表单
			form1.submit();
		}


		var btn02 = document.getElementById("btn02");

		//给发生按钮绑定点击sh事件
		btn02.onclick = function () {
			//  把页面输入的手机号发生给服务器
			//1.获得页面输入的手机号码
			var phone = form2.phone.value;

			//2.验证手机号码输入的是否合法。  如果手机号码输入的不合法，则不允许向服务器发生请求。

			//3.定请求的URL地址
			var url ="${pageContext.request.contextPath}/userPhoneSend?phone=" + phone;

			//4.创建AJAX的对象

			var req =new XMLHttpRequest();

			//5.设置请求的地址和请求的方式
            /**
			 * @param {string} method   请求的方式  如GET   POST
				 @param {string} url    请求的地址
				 @param {boolean} [async]			是否同步还是异步请求
				 @param {string} [user]				请求的服务器的账号
             @param {string} [password]			请求的服务器的密码
             */
			req.open("GET",url);  //和服务器建立连接通道。

			//6.向服务器发生请求
			req.send(null);


			//7.监听ajax的状态。
            /**
			 *.0代表未初始化。还没有调用open方法
             .1代表正在加载。open方法已被调用，但send方法还没有被调用。
             .2代表已加载完毕。Send方法已被调用，请求已经开始
             .3代表交互中。服务器正在发生响应
             .4代表完成。响应发生完毕
             */
            //每次状态改变时 都会执行该函数
            req.onreadystatechange = function () {
				//判断是否服务器已经响应完成
				if(req.readyState==4){
					//判断响应的状态码是否为成功的。
					if(req.status==200 || req.status ==304){
					    //req.response  服务器对当次请求的响应信息
						alert(req.response);
					}

				}
            }
        }
	}


</script>
</head>
<body>
<!-- 登录页面  -->
当前在线人数为：${applicationScope.countNums}。
<div class="login">
		<div>
			<div  id="accountTop" class="accountTop" style="float: left;border: 1px solid red;">账号登录</div>
			<div id="PhoneTop" class="PhoneTop" style="float: left;border: 1px solid red;">手机号登录</div>
		</div>
		<div style="clear: left">
			<div id="accountContext" class="accountContext" style="width: 300px;height: 300px;border: 1px solid red;">
					<!-- 账号登录 -->
					<!-- 
							form:表示一个表单，
									action：表示表单提交的地址
									method:表示表单内容的提交方式。
											get：会把参数拼接到地址栏后面   1kb
											post：隐藏提交的参数信息
							
					
					 -->

					<form id="form1" action="${pageContext.request.contextPath}/userAccountLongin"  method="post">
							用户名:<input type="text" name="account"  autocomplete="off" value="${cookie.accountCookie.value}">
							<br />
							密码:<input type="password" name="pwd">
							<br>
						验证码:<input type="text" name="code" size="1"><img src="${pageContext.request.contextPath}/validateColorServlet"><Br>
						<input type="checkbox" name="noLogin" value="1">是否10天免登录
							<input type="button" value="提交" id="btn01">
					</form>
			
			</div>
			<div id="PhoneContext" class="PhoneContext" style="width: 300px;height: 300px;border: 1px solid red;display: none;">

				<form action="${pageContext.request.contextPath}/userPhoneLogin" method="post" id="form2">
					手机号码:<input type="text" name="phone"><Br>
					验证码:<input type="text" name="code" style="size: 10px"><input type="button" value="发生验证码" id="btn02"> <Br>
					<br>
					<input type="submit" value="提交">

				</form>



			</div>
		</div>
</div>
<script>

	<c:if test="${!(empty cookie.accountCookie) && !(empty cookie.pwdCookie)}">
    	window.location.href="${pageContext.request.contextPath}/userAccountLongin?account=${cookie.accountCookie.value}&pwd=${cookie.pwdCookie.value}";
	</c:if>


</script>
<!-- 
<a href="/JavaWeb01/testServlet">To Test Servlet</a>
 -->
</body>
</html>
